const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: '[name].build.js',
        path: resolve(__dirname, 'build'),
    },
    // loader 配置
    module: {
        rules: [
            // loader 的配置
            {
                test:/\.css$/,
                use:['style-loader','css-loader'],
            },
            //一下配置只会匹配一个
            {
                oneOf:[]
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin(),
    ],
    mode: 'development', // 开发模式
    // mode: 'production', // 生产模式
    // 解析模块的规则
    resolve:{
        // 配置解析模块路径别名：优点 简写路径 缺点 路径没有提示
        alias:{
            // 这样的话就相当于在 import 时就可以少些路径了，以前【import '../css/index.css'】  然后配置了这个就可以写成这样了 【import '$css/index.css'】
            $css:resolve(__dirname,'src/css'),
        },
        // 可以省略 import 时的后缀，比如以前是 【import '../css/index.css'】 配置了这个就可以写成 【import '../css/index'】 了，这样要注意文件名字不能一样，不然容易弄错（当在同一个文件夹下的js和css有同名的文件时）
        // extensions:['.js','.json','.css'],
        // 告诉 webpack node_modules 的文件夹路径在哪里
        // modules:[resolve(__dirname,'../../node_modules','node_modules')]
    },
    // 开发服务器 devServer ： 用来自动化【自动编译，自动打开浏览器，自动刷新】
    // 只会在内存中编译打包，不会有任何输出
    // 启动devServer指令： npx webpack-dev-server 
    devServer:{
        contentBase:resolve(__dirname,'build'),
        // 监事 contentBase 目录下的所有文件，一旦文件变化就会 reload
        watchContentBase:true,
        watchOptions:{
            ignored:/node_modules/  //忽略监事的文件夹
        },
        // 启动gzip压缩
        compress:true,
        // 指定端口号
        port:5000,
        // 指定域名
        // host:'localhost',
        // 自动打开默认浏览器
        open:true,
        // 不要显示启动服务器日志信息
        clientLogLevel:'none',
        // 除了一些基本启动信息以外，其它内容都不要显示出来
        quiet:true,
        // 如果出现错误，不要全屏提示
        overlay:false,
        // 服务器代理 --> 解决开发环境时跨域问题
        proxy:{
            // 一旦devServer(5000)服务器接收到 /api/XXX 的请求，就会把请求转发到另外一个服务器(3000)
            '/api':{
                target:'http://localhost:3000'
            },
            // 发送请求时，请求路径重写：将 /api/XXX ---->  /XXX  （去掉 /api ）
            pathRewrite:{
                '^/api':''
            }
        },
    }

}